<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类型列表</title>
	<!-- 返回首页的按钮 -->
	<a class="btn btn-primary" th:href="@{/root/index}" role="button">返回首页</a>
	<!-- 添加按钮 -->
	<a class="btn btn-primary" th:href="@{/articletype/toAdd}" role="button">添加类型</a>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
    <h2>类型列表</h2>
    <table class="table table-bordered table-hover">
        <thead class="thead-dark">
        <tr>
            <th>ID</th>
            <th>文章类型</th>
            <th>创建日期</th>
            <th>删除</th>
        </tr>
        </thead>
        <tbody>
        <!-- 使用Thymeleaf遍历文章类型列表 -->
        <tr th:each="type : ${ArticletypePage.content}">
            <td th:text="${type.id}">1</td>
            <td th:text="${type.type}">文章类型</td>
            <td th:text="${#dates.format(type.createTime, 'yyyy-MM-dd HH:mm:ss')}">创建日期</td>
			<td>
				    <a class="btn btn-danger" th:href="@{/articletype/delete(id=${type.id})}" role="button" onclick="return confirm('确定要删除吗？')">删除</a>
			</td>
        </tr>
        </tbody>
    </table>
    <!-- 分页组件 -->
    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item" th:if="${ArticletypePage.hasPrevious()}">
                <a class="page-link" th:href="@{/articletype/page(pageIndex=${ArticletypePage.number - 1})}">上一页</a>
            </li>
            <li class="page-item" th:if="${ArticletypePage.hasNext()}">
                <a class="page-link" th:href="@{/articletype/page(pageIndex=${ArticletypePage.number + 1})}">下一页</a>
            </li>
        </ul>
    </nav>
</div>
<!-- 引入Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>